<template>
  <div class="project">
    <!-- 监测点   -->
    <div class="wrapper">
      <div class="wb_header">
        <div>监测点管理</div>
      </div>
      <div class="warp warp1">
        <el-form :inline="true" :model="queryParams" class="demo-form-inline">
          <el-form-item label="">
              <el-select v-model="queryParams.province" placeholder="请选择省" filterable clearable  @change="ProvinceChange">
                <el-option v-for="(item,index) in provinceList" :key="index" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="">
              <el-select v-model="queryParams.city" placeholder="请选择市" filterable clearable   @change="CityChange">
                <el-option v-for="(item,index) in cityList" :key="index" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="">
              <el-select v-model="queryParams.county" placeholder="请选择区" filterable clearable >
                <el-option v-for="(item,index) in countyList" :key="index" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          <el-form-item label="">
            <el-select v-model="queryParams.projectNo" placeholder="请选择项目">
              <el-option v-for="(item,index) in projectList" :key="index" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label=""> 
            <el-input placeholder="请输入关键字" suffix-icon="el-icon-search" v-model="queryParams.keyword"> </el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="getList">查询</el-button>
            <el-button @click="resetQueryFrom">重置</el-button>
          </el-form-item>
        </el-form>
        <div class="tableBtn">
          <button class="divBtn" @click="openForm=true"><img class="plus" src="@/assets/images/加.svg" />新建监测点</button>
          <button class="divBtn"><img class="plus" src="@/assets/images/导出.svg" />导出设备</button>
        </div>
      </div> 
      <el-table v-loading="loading" :data="configList"> 
        <el-table-column label="监测点名称" align="center" prop="name" show-overflow-tooltip />
        <el-table-column label="监测点编号" width="120" align="center" prop="monitorNo" :show-overflow-tooltip="true" />
        <el-table-column label="监测点类型" width="120" align="center" prop="type" :show-overflow-tooltip="true" />
        <el-table-column label="坐标" width="140" align="center">
          <template slot-scope="{row}">
            <div>经度：{{ row.lon }}</div>
            <div>纬度：{{ row.lat }}</div>
          </template>
        </el-table-column>
        <el-table-column label="地址" align="center" width="240" prop="site" :show-overflow-tooltip="true" /> 
        <el-table-column label="重点关注" width="120" align="center">
          <template slot-scope="{row}">
            <el-switch active-text="是" inactive-text="否"  active-value="是" inactive-value="否" v-model="row.isAttention" active-color="#13ce66" inactive-color="#ff4949" disabled></el-switch>
          </template>
        </el-table-column> 
        <el-table-column label="视屏监控" width="80" align="center" prop="isControl" :show-overflow-tooltip="true" /> 
        <el-table-column label="创建时间" width="120" align="center" prop="createTime" :show-overflow-tooltip="true" /> 
        <el-table-column label="备注" align="center" prop="remarks" :show-overflow-tooltip="true" width="240" /> 
        <el-table-column label="操作" width="140" align="center" class-name="small-padding fixed-width" fixed="right">
          <template slot-scope="{row}"> 
            <el-button size="mini" type="text">查看设备</el-button>  
            <el-button size="mini" type="text" class="color_success" @click="editProject(row)">编辑</el-button> 
            <el-button size="mini" type="text" class="color_danger" @click="deleteProject(row.id)">删除</el-button> 
          </template>
        </el-table-column>
      </el-table> 
      <pagination v-show="total>0" :total="total" :page.sync="queryParams.page" :limit.sync="queryParams.limit" @pagination="getList" />
    </div>

    <el-dialog :title="form.id?'编辑监测点':'新建监测点'" :visible.sync="openForm" width="500px" append-to-body @closed="cancel('form')">
        <el-form ref="form" :model="form" :rules="rules" label-width="100px">
            <el-form-item label="监测点名称" prop="name">
              <el-input v-model="form.name" placeholder="请输入" />
            </el-form-item>
            <el-form-item label="监测点编号" prop="monitorNo">
              <el-input v-model="form.monitorNo" placeholder="请输入" />
            </el-form-item>
            <el-form-item label="监测点类型" prop="type">
              <el-select v-model="form.type" placeholder="请选择" style="width: 100%">
                <el-option v-for="item in typeOptions" :key="item.value" :label="item.label" :value="item.value"></el-option> 
              </el-select>
            </el-form-item>
            <el-row>
              <el-col :span="12">
                <el-form-item label="监测点类型"> 
                  <el-switch active-text="是" inactive-text="否" active-value="是" inactive-value="否" v-model="form.isAttention" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="视频监控"> 
                  <el-switch active-text="是" inactive-text="否" active-value="是" inactive-value="否" v-model="form.isControl" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
                </el-form-item>
              </el-col>
            </el-row> 
            <el-form-item label="所属项目" prop="projectNo">
              <el-select v-model="form.projectNo" placeholder="请选择" style="width: 100%">
                <el-option v-for="item in projectList" :key="item.value" :label="item.label" :value="item.value"></el-option> 
              </el-select>
            </el-form-item> 
            <el-form-item label="省市区" prop="siteval">
              <el-cascader v-model="siteval" clearable :options="district" @change="siteChange" style="width: 100%"></el-cascader>
            </el-form-item>
            <el-form-item label="详细地址" prop="siteDetail">
              <el-input v-model="form.siteDetail" placeholder="请输入" />
            </el-form-item>
            <el-row>
              <el-col :span="12">
                <el-form-item label="经度" prop="lon">
                  <el-input v-model="form.lon" placeholder="请输入" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="纬度" prop="lat">
                  <el-input v-model="form.lat" placeholder="请输入" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-form-item label="备注">
                <el-input v-model="form.remarks" type="textarea" placeholder="请输入内容" />
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="submitForm('form','编辑')" v-show="form.id">修 改</el-button>
            <el-button type="primary" @click="submitForm('form','新增')" v-show="!form.id">新 增</el-button>
            <el-button @click="cancel('form')">取 消</el-button>
        </div>
    </el-dialog>
  </div>
</template>

<script>
import { districtJs } from "@/assets/js/district.js"; 
export default {
data() {
  return { 
    district: districtJs(), 
    loading: true,
    configList: [] ,
    total: 0,
    queryParams:{
      page: 1,
      limit: 10,
      province: "",
      city: "",
      county: "",
      projectNo: "",
      keyword: ""
    },
    provinceList: [],
    cityList: [],
    countyList: [],
    citydata: [],
    projectList: [],
    openForm: false,
    form: {
      isAttention: "否",
      isControl: "否"
    },
    siteval: "", 
    typeOptions: [
      {label: "滑坡", value: "滑坡"},
      {label: "泥石流", value: "泥石流"},
      {label: "不稳定斜坡", value: "不稳定斜坡"},
      {label: "房屋安全监测", value: "房屋安全监测"},
      {label: "风机安全监测", value: "风机安全监测"},
      {label: "塌陷", value: "塌陷"},
      {label: "崩塌", value: "崩塌"},
      {label: "河坝", value: "河坝"},
    ],
    rules: {
      name: [
        { required: true, message: '内容不能为空', trigger: 'blur' }, 
      ],
      monitorNo: [
        { required: true, message: '内容不能为空', trigger: 'blur' }, 
      ],
      projectNo: [
        { required: true, message: '内容不能为空', trigger: 'blur' }, 
      ],
      type: [
        { required: true, message: '内容不能为空', trigger: 'blur' }, 
      ], 
      siteDetail: [
        { required: true, message: '内容不能为空', trigger: 'blur' }, 
      ],
      lon: [
        { required: true, message: '内容不能为空', trigger: 'blur' }, 
      ],
      lat: [
        { required: true, message: '内容不能为空', trigger: 'blur' }, 
      ],
    },
  }
},
mounted() {
  this.getprovinceList();
  this.getList();
  this.getAllProject();
},
methods:{ 
  deleteProject(id){
    let _this = this;
    this.$confirm('此操作将永久删除该项目, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let url = process.env.VUE_APP_SERVER_API_URL + "/monitor/delete";
        let data = new FormData();
        let idList = [id];
        data.append("idList", idList);
        _this.$axios.post(url, data).then(res => {
          if(res.data.code == 200){
            _this.$message.success(res.data.msg);
            _this.getList();
          }else{
            _this.$message.error(res.data.msg);
          }
        })
      }).catch(() => {});
  },
  editProject(row){
    let _this = this;
    _this.form = {...row}; 
    _this.siteval = row.site.split("/");
    _this.openForm = true;
  },
  siteChange(val){ 
    this.form.site = val.join("/");
  },
  submitForm(formName,type){
    let _this = this; 
    _this.$refs[formName].validate((valid) => {
        if (valid) { 
          var url;
          if(type == "新增"){ 
            url = process.env.VUE_APP_SERVER_API_URL + "/monitor/insert";
          }else{ 
            url = process.env.VUE_APP_SERVER_API_URL + "/monitor/update";
          } 
          let data = _this.form;
          _this.$axios.post(url, data).then(res => { 
            if(res.data.code == 200){
              _this.$message.success(res.data.msg);
              _this.cancel('form');
              _this.getList();
            }else{
              _this.$message.error(res.data.msg);
            }
          });
        } else { 
          return false;
        }
      });
  },
  cancel(){
    this.openForm = false;
    this.resetForm("form");
    this.form = {
      isAttention: "否",
      isControl: "否"
    };
    _this.siteval = "";
  },
  resetForm(formName) {
    this.$refs[formName].resetFields();
  },
  resetQueryFrom(){
      this.queryParams = {
        page: 1,
        limit: 10,
        province: "",
        city: "",
        county: "",
        projectNo: "",
        keyword: ""
      }
      this.getList();
    },
  getAllProject(){
    let _this = this;
    let url = process.env.VUE_APP_SERVER_API_URL + "/iot-project/getAllProjectNo";
    _this.$axios.get(url).then(res=>{ 
      _this.projectList = res.data.data;
    });
  },
  getList(){
      let _this = this;
      let params = _this.queryParams;
      let url = process.env.VUE_APP_SERVER_API_URL + "/monitor/getAllData";
      _this.$axios.get(url, {params}).then(res=>{  
        _this.loading = false;
        _this.configList = res.data.data.records;
        _this.total = res.data.data.total;
      })
    }, 
  CityChange(val){ 
      let _this = this;
      _this.countyList = []; 
      _this.citydata.forEach(item => {
        if(item.label == val){
          item.children.forEach(item2 => {
            _this.countyList.push({label: item2.label, value: item2.label});
          }); 
        }
      });
      
      _this.queryParams.county = "";
    },
    ProvinceChange(val){ 
      let _this = this;
      _this.cityList = []; 
      _this.queryParams.city = "";
      _this.district.forEach(item => {
        if(item.label == val){
          item.children.forEach(item2 => {
            _this.cityList.push({label: item2.label, value: item2.label}); 
            _this.citydata.push(item2);
          }); 
        }
      }); 
    },
    getprovinceList(){
      let _this = this;
      _this.provinceList = [];
      _this.district.forEach(item => {
        _this.provinceList.push({label: item.label, value: item.label})
      }); 

    },
}
}
</script>

<style scoped>
@import "~@/assets/styles/tablePage.scss";
</style>